<template>
    <el-card>
        <div class="form-filter">
            <el-button size="small" type="primary" @click="addSite">添加站点</el-button>
        </div>
        <r-table :data="tableData" :columns="columns">
            <template slot="backup" scope="scope">
                {{ scope.row.backup ? scope.row.backup : '未备份' }}
            </template>
            <template slot="actions" scope="scope">
                <el-button type="text">防火墙</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text">设置</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
            </template>
        </r-table>
        <site-add :visible="addSiteVisible" @onClose="cancelAddSite" @loadData="loadData"></site-add>
        <site-delete :visible="delSiteVisible" :siteId="choosedSiteId" @onClose="cancelDelSite" @onSuccess="delSiteSuccess"></site-delete>
    </el-card>
</template>

<script>
    import SiteAdd from "./components/Add"
    import SiteDelete from "./components/Delete"
    import { getSites } from "@/api/site"
    export default {
        name: 'database',
        data () {
            return {
                query: {},
                tableData: [
                ],
                columns: [
                    {
                        label: "ID",
                        value: "id"
                    },
                    {
                        label: '域名',
                        value: 'domain'
                    },
                    {
                        label: '状态',
                        value: 'status'
                    },
                    {
                        label: '备份',
                        value: 'backup',
                        scope: 'backup'
                    },
                    {
                        label: '根目录',
                        value: 'webroot'
                    },
                    {
                        label: '备注',
                        value: 'note'
                    },
                    {
                        label: '操作',
                        scope: 'actions'
                    }
                ],
                addSiteVisible: false,
                delSiteVisible: false,
                choosedSite: {}
            }
        },
        methods: {
            addSite () {
                this.addSiteVisible = true
            },
            cancelAddSite () {
                this.addSiteVisible = false
            },
            loadData () {
                getSites(this.query).then(res => {
                    console.log(res)
                    this.tableData = res.data
                })
            },
            handleDel (item) {
                this.delSiteVisible = true
                this.choosedSite = item
            },
            cancelDelSite () {
                this.delSiteVisible = false
                // this.loadData()
            },
            delSiteSuccess () {
                console.log(3)
                this.loadData()
            }
        },
        created () {
            this.loadData()
        },
        computed: {
            choosedSiteId () {
                return this.choosedSite.id
            }
        },
        components: {
            SiteAdd,
            SiteDelete
        }
    }
</script>